<template>
  <div class="filter-container">
    <el-input
      v-model="listQueryValue.name"
      :placeholder="listQueryRemark.name"
      style="width: 200px"
      class="filter-item"
      @keyup.enter="handleFilter"
    />
    <el-input
      v-model="listQueryValue.phoneNumber"
      :placeholder="listQueryRemark.phoneNumber"
      style="width: 200px"
      class="filter-item"
      @keyup.enter="handleFilter"
    />
    <el-select
      v-model="listQueryValue.positionType"
      :placeholder="listQueryRemark.positionType"
      clearable
      class="filter-item"
      style="width: 130px"
    >
      <el-option
        v-for="item in listQueryRemark.positionTypeOptions"
        :key="item.key"
        :label="item.displayName + '(' + item.key + ')'"
        :value="item.key"
      />
    </el-select>
    <el-button
      class="filter-item"
      type="primary"
      icon="el-icon-search"
      @click="handleFilter"
    >
      {{ listQueryRemark.search }}
    </el-button>
    <el-button
      class="filter-item"
      type="primary"
      icon="el-icon-edit"
      @click="handleAdd"
    >
      {{ listQueryRemark.add }}
    </el-button>
    <el-button
      class="filter-item"
      type="primary"
      icon="el-icon-download"
      @click="handleDownload"
    >
      {{ listQueryRemark.export }}
    </el-button>

    <add-dialogue-vue
      :isVisible="listQueryRemark.isAddVisible"
      @updateData="updateData"
      @hide="hide"
    ></add-dialogue-vue>
  </div>
</template>

<script>
import addDialogueVue from "./addDialogue.vue";

export default {
  components: {
    addDialogueVue,
  },
  data() {
    return {
      listQueryRemark: {
        name: "姓名",
        phoneNumber: "电话号码",
        positionTypeOptions: [
          { key: "super", displayName: "最高权限员" },
          { key: "manager", displayName: "经理" },
          { key: "counter", displayName: "柜台" },
        ],
        positionType: "职位",
        search: "搜索",
        add: "添加",
        export: "导出",
        total: 100,
        isAddVisible: false,
      },
      listQueryValue: {
        name: "",
        phoneNumber: "",
        positionType: "",
        page: 1,
        limit: 10,
        currentPage: 1,
      },
    };
  },
  methods: {
    handleAdd() {
      this.listQueryRemark.isAddVisible = true;
      console.log("Nihao " + this.listQueryRemark.isAddVisible)
    },
    updateData() {
      //   /* 修改数据时，将调用$emit（），
      //   把自增结果传给父组件 */
      this.listQueryRemark.isAddVisible = false;
      // this.$emit("updateData");
    },
    hide(){      
      this.listQueryRemark.isAddVisible = false;
    }
  },
};
</script>